<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sqwarea</title>
    <link rel="icon" type="image/png" href="../../Content/Images/favicon.png" />
    <link rel="stylesheet" href="../../Content/Game.css" type="text/css" media="screen" charset="utf-8" title="sqwarea" />
    <style type="text/css"></style>
    <script type="text/javascript" src="../../Content/Scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../Content/Scripts/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="../../Content/Scripts/GameTools.js"></script>
    <script type="text/javascript" src="../../Content/Scripts/GameLogic.js"></script>
    <script type="text/javascript" src="../../Content/Scripts/GameMap.js"></script>
    <script type="text/javascript" src="../../Content/Scripts/GameDialog.js"></script>
    <script type="text/javascript">
    Logic.globals = {
        moveKingDelay : <%= Sqwarea.GameLogic.GlobalParameters.MinimumHoursBetweenTwoKingMove %> * 3600 * 1000,
        minimumTroopsToClaimSquare : <%= Sqwarea.GameLogic.GlobalParameters.MinimumTroopsToClaimSquare %>,
        initialSquareTroopsNumber : <%= Sqwarea.GameLogic.GlobalParameters.InitialSquareTroopsNumber %>,
        sessionId : <%= ViewData["SessionId"] %>
    };
    </script>
</head>
<body>
    <div class="Templates">
    
        <div class="Dialog">
            <div class="Titlebar">
            <div class="Title">
            
            </div>
            </div>
            <div class="Content">
            
            </div>
            <div class="Buttons">
            </div>
        </div>
    
        <div class="SendTroopsDialog">
        <p>Select the number of troops to send : <input type="text" size="3" class="TroopsNumber" /></p>
        <div class="Slider">
        </div>
        </div>
        
        <div class="TakeTroopsDialog">
        <p>Select the number of troops to take : <input type="text" size="3" class="TroopsNumber" /></p>
        <div class="Slider">
        </div>
        </div>
    
    </div>

    <div class="Game">
    
        <div class="Panel">
            
            <div class="Dashboard"></div> <!-- username, score, king position (with a link to recenter the screen on that position)... -->
            <div class="Control"></div>
            <div class="RecentActions"></div> <!-- recents moves -->
            <div class="UpcomingActions"></div> <!-- futures troops arrival, upcoming attacks... -->
            
        </div>
		
		<div class="Map">
			
			<img id="Loader" src="../../Content/Images/ajax-loader.gif" />
			<div class="Ground"></div>
			
			<div class="Overlay"></div>
			<div class="Dialogs"></div>
			
			<div class="Top Border"></div>
			<div class="Right Border"></div>
			<div class="Bottom Border"></div>
			<div class="Left Border"></div>
			
		</div>
		
		<div class="Tools">
		
		    <a href="/Home"><img id="Logo" src="../../Content/Images/header.png" /></a>

	        <div class="Container">
	        <h2 class="Selected"><span class="Nickname">Army</span> 
	        <img class="ZoomIn" src="../../Content/Images/zoom_out.png" />
	        <img class="ZoomOut" src="../../Content/Images/zoom_in.png" />
	        <a class="Logout" title="Log out" href="/Account/LogOff"><img src="../../Content/Images/door_out.png" /></a></h2>
	        <div class="Army Content Selected">
	            <dl>
	                <dt>King movement:</dt>
	                <dd class="KingMovement"></dd>
	                <dt>Troops in academy:</dt>
	                <dd class="TroopsInAcademy"></dd>
	                <div style="clear: both"></div>
	            </dl>
	            <div class="Top Border"></div>
			    <div class="Right Border"></div>
			    <div class="Bottom Border"></div>
			    <div class="Left Border"></div>
	        </div>
	        </div>
	        
	        <div class="Container TabPane">
	        <h2 class="Selected Actions" target=".Actions">Actions </h2>
	        <h2 class="Logs" target=".Logs">Events</h2>
	        <div class="Actions Content Selected">
	            <ol>
	                <li class="GoToKing"><img src="../../Content/Images/king.png" /> <u>G</u>o to king</li>
	                <li class="MoveKing"><img src="../../Content/Images/king.png" /> <u>M</u>ove king</li>
	                <li class="SendTroops"><img src="../../Content/Images/troops.png" /> <u>S</u>end troops</li>
	                <li class="TakeTroops"><img src="../../Content/Images/troops.png" /> <u>T</u>ake troops</li>
	                <li class="ViewTerritories"><img src="../../Content/Images/troops.png" /> <u>V</u>iew territories</li>
	            </ol>
	            <div class="Top Border"></div>
			    <div class="Right Border"></div>
			    <div class="Bottom Border"></div>
			    <div class="Left Border"></div>
	        </div>
	         <div class="Logs Content">
	            <ol></ol>
	            <div class="Top Border"></div>
			    <div class="Right Border"></div>
			    <div class="Bottom Border"></div>
			    <div class="Left Border"></div>
	        </div>
	        </div>
	    </div>
	
	</div>
</body>
</html>
